<template>
  <div class="container">
    <!-- <canvas ref="sphereCanvas" width="80" height="80"></canvas> -->
    <img ref="sphereCanvas" width="60" height="60" src="../../assets/ball.gif" alt="">
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// Canvas引用
const sphereCanvas = ref(null);

onMounted(() => {
  return
  const canvas = sphereCanvas.value;
  const ctx = canvas.getContext('2d');
  const width = canvas.width; // 现在是80
  const height = canvas.height; // 现在是80
  const centerX = width / 2;
  const centerY = height / 2;
  const radius = 35; // 保持半径不变，也可根据需要调整
  let rotationAngle = 0;

  // 定义曲线类
  class Curve {
    constructor() {
      this.angle = Math.random() * Math.PI * 2;
      this.radius = Math.random() * radius * 0.8;
      this.speed = (Math.random() - 0.5) * 0.04;
      this.color = `hsl(${Math.random() * 360}, 80%, 60%)`;
      this.controlOffset = Math.random() * 10 + 10;
    }

    update() {
      this.angle += this.speed;
      if (this.angle > Math.PI * 2) this.angle -= Math.PI * 2;
      if (this.angle < 0) this.angle += Math.PI * 2;
    }

    draw() {
      const x1 = centerX + Math.cos(this.angle + rotationAngle) * this.radius;
      const y1 = centerY + Math.sin(this.angle + rotationAngle) * this.radius;
      const x2 = centerX + Math.cos(this.angle + Math.PI + rotationAngle) * this.radius;
      const y2 = centerY + Math.sin(this.angle + Math.PI + rotationAngle) * this.radius;
      const cx1 = centerX + Math.cos(this.angle + Math.PI / 4 + rotationAngle) * (this.radius - this.controlOffset);
      const cy1 = centerY + Math.sin(this.angle + Math.PI / 4 + rotationAngle) * (this.radius - this.controlOffset);
      const cx2 = centerX + Math.cos(this.angle + 3 * Math.PI / 4 + rotationAngle) * (this.radius - this.controlOffset);
      const cy2 = centerY + Math.sin(this.angle + 3 * Math.PI / 4 + rotationAngle) * (this.radius - this.controlOffset);

      ctx.beginPath();
      ctx.moveTo(x1, y1);
      ctx.bezierCurveTo(cx1, cy1, cx2, cy2, x2, y2);
      ctx.strokeStyle = this.color;
      ctx.lineWidth = 0.5;
      ctx.stroke();
    }
  }

  // 创建50条曲线
  const curves = Array.from({ length: 50 }, () => new Curve());

  // 动画函数
  function animate() {
    ctx.clearRect(0, 0, width, height);

    // 更新旋转角度
    rotationAngle += 0.01;

    // 绘制球体
    const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius);
    gradient.addColorStop(0, 'rgba(255, 255, 255, 0.4)');
    gradient.addColorStop(0.85, 'rgba(1, 1, 1, 0.8)');
    gradient.addColorStop(1, 'rgba(32, 39, 53, 0.3)');
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
    ctx.fillStyle = gradient;
    ctx.fill();
    ctx.strokeStyle = 'rgba(0, 0, 0, 0)';
    ctx.lineWidth = 1;
    ctx.stroke();

    // 更新并绘制曲线
    curves.forEach(curve => {
      curve.update();
      curve.draw();
    });

    requestAnimationFrame(animate);
  }

  // 开始动画
  animate();
});
</script>

<style scoped>
.container {
  position: absolute;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
  z-index: 10000;
  bottom: 10px;
  left: 50%; /* 水平居中：将左边缘移到页面50%位置 */
  transform: translateX(-50%); /* 向左偏移自身宽度的一半 */
}
</style>